<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点餐 - 厨房管家</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 新拟物化风格 */
        .neumorphic {
            background: #f0f0f3;
            box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
        }
        
        .neumorphic-inset {
            background: #f0f0f3;
            box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #ffffff;
        }
        
        .neumorphic-btn {
            background: #f0f0f3;
            box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
            transition: all 0.3s ease;
        }
        
        .neumorphic-btn:hover {
            box-shadow: inset 8px 8px 16px #bebebe, inset -8px -8px 16px #ffffff;
        }
        
        .neumorphic-card {
            background: #f0f0f3;
            box-shadow: 12px 12px 24px #bebebe, -12px -12px 24px #ffffff;
            transition: all 0.3s ease;
        }
        
        /* iPhone 16 Pro 样式 */
        .iphone-container {
            width: 390px;
            height: 844px;
            border-radius: 55px;
            overflow: hidden;
            position: relative;
            background: #000;
            padding: 10px;
        }
        
        .iphone-screen {
            width: 100%;
            height: 100%;
            border-radius: 45px;
            overflow: hidden;
            background: #f0f0f3;
            position: relative;
        }
        
        /* 状态栏样式 */
        .status-bar {
            height: 44px;
            background: #f0f0f3;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 24px;
            font-size: 14px;
            font-weight: 600;
        }
        
        /* 动态岛 */
        .dynamic-island {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 126px;
            height: 37px;
            background: #000;
            border-radius: 20px;
            z-index: 10;
        }
        
        /* 日期选择器 */
        .date-picker {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        /* 购物车动画 */
        @keyframes cartBounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }
        
        .cart-bounce {
            animation: cartBounce 0.3s ease;
        }
        
        /* 选中效果 */
        .dish-selected {
            border: 2px solid #9333ea;
            box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="iphone-container">
        <div class="iphone-screen">
            <!-- 动态岛 -->
            <div class="dynamic-island"></div>
            
            <!-- 状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex gap-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
            
            <!-- 顶部导航 -->
            <div class="px-6 py-4 flex items-center justify-between">
                <i class="fas fa-arrow-left text-xl text-gray-700 cursor-pointer" onclick="window.history.back()"></i>
                <h2 class="text-xl font-bold text-gray-800">点餐</h2>
                <div class="relative">
                    <i class="fas fa-shopping-cart text-xl text-gray-700 cursor-pointer" onclick="toggleCart()"></i>
                    <span id="cartCount" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">0</span>
                </div>
            </div>
            
            <!-- 日期选择 -->
            <div class="px-6 mb-4">
                <div class="date-picker rounded-2xl p-4 text-white">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm opacity-90">用餐时间</span>
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-2xl font-bold">今天</p>
                            <p class="text-sm opacity-90">9月3日 星期二</p>
                        </div>
                        <div class="text-right">
                            <p class="text-lg font-semibold">晚餐</p>
                            <p class="text-sm opacity-90">18:00</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 分类标签 -->
            <div class="px-6 mb-4">
                <div class="flex gap-3 overflow-x-auto">
                    <span class="px-4 py-2 neumorphic-btn rounded-full text-sm whitespace-nowrap text-purple-600 font-medium">推荐</span>
                    <span class="px-4 py-2 neumorphic-btn rounded-full text-sm whitespace-nowrap text-gray-600">家常菜</span>
                    <span class="px-4 py-2 neumorphic-btn rounded-full text-sm whitespace-nowrap text-gray-600">汤羹</span>
                    <span class="px-4 py-2 neumorphic-btn rounded-full text-sm whitespace-nowrap text-gray-600">主食</span>
                    <span class="px-4 py-2 neumorphic-btn rounded-full text-sm whitespace-nowrap text-gray-600">西餐</span>
                </div>
            </div>
            
            <!-- 菜品网格 -->
            <div class="px-6 pb-32 h-full overflow-y-auto">
                <div class="grid grid-cols-2 gap-4">
                    <!-- 菜品卡片1 -->
                    <div class="neumorphic-card rounded-2xl overflow-hidden cursor-pointer dish-card" onclick="toggleDish(this)">
                        <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=200&h=150&fit=crop" alt="番茄炒蛋" class="w-full h-32 object-cover">
                        <div class="p-3">
                            <h3 class="font-semibold text-gray-800 mb-1">番茄炒蛋</h3>
                            <p class="text-xs text-gray-600 mb-2">少油少盐版本</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-500">
                                    <i class="fas fa-clock"></i> 15分钟
                                </span>
                                <div class="flex items-center gap-1">
                                    <span class="star-rating text-xs">★★</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 菜品卡片2 -->
                    <div class="neumorphic-card rounded-2xl overflow-hidden cursor-pointer dish-card" onclick="toggleDish(this)">
                        <img src="https://images.unsplash.com/photo-1516684669134-de6f7c473a2a?w=200&h=150&fit=crop" alt="红烧肉" class="w-full h-32 object-cover">
                        <div class="p-3">
                            <h3 class="font-semibold text-gray-800 mb-1">红烧肉</h3>
                            <p class="text-xs text-gray-600 mb-2">肥而不腻</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-500">
                                    <i class="fas fa-clock"></i> 90分钟
                                </span>
                                <div class="flex items-center gap-1">
                                    <span class="star-rating text-xs">★★★★</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 菜品卡片3 -->
                    <div class="neumorphic-card rounded-2xl overflow-hidden cursor-pointer dish-card" onclick="toggleDish(this)">
                        <img src="https://images.unsplash.com/photo-1547592180-85f173990554?w=200&h=150&fit=crop" alt="紫菜蛋花汤" class="w-full h-32 object-cover">
                        <div class="p-3">
                            <h3 class="font-semibold text-gray-800 mb-1">紫菜蛋花汤</h3>
                            <p class="text-xs text-gray-600 mb-2">清淡爽口</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-500">
                                    <i class="fas fa-clock"></i> 10分钟
                                </span>
                                <div class="flex items-center gap-1">
                                    <span class="star-rating text-xs">★</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 菜品卡片4 -->
                    <div class="neumorphic-card rounded-2xl overflow-hidden cursor-pointer dish-card" onclick="toggleDish(this)">
                        <img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=200&h=150&fit=crop" alt="意大利面" class="w-full h-32 object-cover">
                        <div class="p-3">
                            <h3 class="font-semibold text-gray-800 mb-1">意大利面</h3>
                            <p class="text-xs text-gray-600 mb-2">番茄肉酱</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-500">
                                    <i class="fas fa-clock"></i> 25分钟
                                </span>
                                <div class="flex items-center gap-1">
                                    <span class="star-rating text-xs">★★★</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 菜品卡片5 -->
                    <div class="neumorphic-card rounded-2xl overflow-hidden cursor-pointer dish-card" onclick="toggleDish(this)">
                        <img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?w=200&h=150&fit=crop" alt="蒸蛋羹" class="w-full h-32 object-cover">
                        <div class="p-3">
                            <h3 class="font-semibold text-gray-800 mb-1">蒸蛋羹</h3>
                            <p class="text-xs text-gray-600 mb-2">嫩滑爽口</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-500">
                                    <i class="fas fa-clock"></i> 15分钟
                                </span>
                                <div class="flex items-center gap-1">
                                    <span class="star-rating text-xs">★</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 菜品卡片6 -->
                    <div class="neumorphic-card rounded-2xl overflow-hidden cursor-pointer dish-card" onclick="toggleDish(this)">
                        <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=200&h=150&fit=crop" alt="炒青菜" class="w-full h-32 object-cover">
                        <div class="p-3">
                            <h3 class="font-semibold text-gray-800 mb-1">炒青菜</h3>
                            <p class="text-xs text-gray-600 mb-2">清爽健康</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-gray-500">
                                    <i class="fas fa-clock"></i> 8分钟
                                </span>
                                <div class="flex items-center gap-1">
                                    <span class="star-rating text-xs">★</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 底部提交栏 -->
            <div class="absolute bottom-0 left-0 right-0 neumorphic-inset rounded-t-3xl p-4">
                <div class="flex items-center justify-between mb-3">
                    <span class="text-gray-600">已选 <span id="selectedCount">0</span> 道菜</span>
                    <button class="text-purple-600 text-sm" onclick="clearSelection()">清空</button>
                </div>
                <button class="w-full neumorphic-btn rounded-2xl py-4 bg-purple-600 text-white font-semibold" onclick="submitOrder()">
                    提交订单
                </button>
            </div>
            
            <!-- 购物车侧边栏 -->
            <div id="cartSidebar" class="fixed right-0 top-0 h-full w-80 bg-white transform translate-x-full transition-transform duration-300 z-50 shadow-2xl">
                <div class="p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="text-xl font-bold text-gray-800">已选菜品</h3>
                        <i class="fas fa-times text-xl text-gray-600 cursor-pointer" onclick="toggleCart()"></i>
                    </div>
                    
                    <div id="cartItems" class="space-y-3 mb-6">
                        <!-- 购物车项目将动态添加 -->
                    </div>
                    
                    <div class="border-t pt-4">
                        <div class="mb-4">
                            <label class="text-sm text-gray-600 mb-2 block">订单备注</label>
                            <textarea class="w-full neumorphic-inset rounded-xl px-4 py-2" rows="3" placeholder="请输入特殊要求..."></textarea>
                        </div>
                        
                        <button class="w-full neumorphic-btn rounded-2xl py-4 bg-purple-600 text-white font-semibold" onclick="submitOrder()">
                            确认下单
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        let selectedDishes = [];
        
        function toggleDish(element) {
            const dishName = element.querySelector('h3').textContent;
            const dishImg = element.querySelector('img').src;
            
            if (element.classList.contains('dish-selected')) {
                element.classList.remove('dish-selected');
                selectedDishes = selectedDishes.filter(dish => dish.name !== dishName);
            } else {
                element.classList.add('dish-selected');
                selectedDishes.push({ name: dishName, img: dishImg });
            }
            
            updateCartCount();
            animateCart();
        }
        
        function updateCartCount() {
            document.getElementById('cartCount').textContent = selectedDishes.length;
            document.getElementById('selectedCount').textContent = selectedDishes.length;
        }
        
        function animateCart() {
            const cartIcon = document.querySelector('.fa-shopping-cart');
            cartIcon.classList.add('cart-bounce');
            setTimeout(() => cartIcon.classList.remove('cart-bounce'), 300);
        }
        
        function toggleCart() {
            const sidebar = document.getElementById('cartSidebar');
            sidebar.classList.toggle('translate-x-full');
            
            if (!sidebar.classList.contains('translate-x-full')) {
                updateCartItems();
            }
        }
        
        function updateCartItems() {
            const cartItems = document.getElementById('cartItems');
            cartItems.innerHTML = '';
            
            selectedDishes.forEach((dish, index) => {
                const item = document.createElement('div');
                item.className = 'flex items-center gap-3 neumorphic rounded-xl p-3';
                item.innerHTML = `
                    <img src="${dish.img}" alt="${dish.name}" class="w-16 h-16 rounded-lg object-cover">
                    <div class="flex-1">
                        <h4 class="font-semibold text-gray-800">${dish.name}</h4>
                        <input type="text" class="text-sm text-gray-600 mt-1 w-full neumorphic-inset rounded px-2 py-1" placeholder="添加备注...">
                    </div>
                    <i class="fas fa-trash text-red-500 cursor-pointer" onclick="removeFromCart(${index})"></i>
                `;
                cartItems.appendChild(item);
            });
        }
        
        function removeFromCart(index) {
            selectedDishes.splice(index, 1);
            updateCartCount();
            updateCartItems();
            
            // 更新卡片选中状态
            document.querySelectorAll('.dish-card').forEach(card => {
                const dishName = card.querySelector('h3').textContent;
                if (!selectedDishes.find(dish => dish.name === dishName)) {
                    card.classList.remove('dish-selected');
                }
            });
        }
        
        function clearSelection() {
            selectedDishes = [];
            updateCartCount();
            document.querySelectorAll('.dish-card').forEach(card => {
                card.classList.remove('dish-selected');
            });
        }
        
        function submitOrder() {
            if (selectedDishes.length === 0) {
                alert('请至少选择一道菜');
                return;
            }
            
            // 模拟提交成功
            alert('订单提交成功！');
            selectedDishes = [];
            updateCartCount();
            document.querySelectorAll('.dish-card').forEach(card => {
                card.classList.remove('dish-selected');
            });
            toggleCart();
        }
    </script>
</body>
</html>